<template recyclable>
    <div class="card-white-wrapper" @click="onCardClick">
        <div class="card-user-wrapper" style="flex-direction: row">
            <image v-if="itemValue.ex.image" :src="itemValue.ex.image" class="product-img"></image>
            <!--<text class="name-text" style="flex: 1;">{{itemValue.ex.display_login}}</text>-->

        </div>
        <div class="bottom">
            <text class="content-text-black-bold" style="flex: 1;">{{itemValue.ex.name}}</text>
           <div class="right">
               <text class="product-price">￥{{itemValue.price }}</text>
               <text class="product-use">{{itemValue.ex.count}}人已购买</text>
           </div>
        </div>

    </div>
</template>

<script>
    export default {
        props: {
            itemValue: {
                type: Object, default: () => {
                    return {ex:{}}
                }
            },
            itemIndex: {type: Number, default: -1},
            onItemClick:{type:Function}
        },
        components: {},
        methods: {
            onCardClick() {
                this.onItemClick && this.onItemClick(this.itemIndex);
            }
        },
        data() {
            return {}
        },
    }
</script>
<style lang="sass" > @import '../../config/styles.scss'</style>
<style scoped >
    @import '../../config/styles.scss';
    .product-img {
        width: 660px;
        height: 300px;
        align-items: center;
        justify-content: center;
    }
    .card-user-wrapper {
        align-items: center;
        margin-bottom: 20px;
    }
    .bottom{
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    ,right{
        margin-right: 10px;
     }
    .product-use{
        color:#999999;
        font-size:24px;
        text-align:right
    }
    .product-price{
        font-size:36px;
        font-weight:bold;
        color:#FF0000
    }
</style>
